<template>
	<div class="chart">
		<div style="height:18px;"></div>
		<subhead label="网站统计"></subhead>
		<div class="WebStatistics" id="WebStatistics" >
			
		</div>
		<br>
		<subhead label="数据分析"></subhead>
		<div class="DataAnalysis">
			<div class="left" id="MediaSources"></div>
			<div class="right" id="MediaActivity"></div>
		</div>
		<subhead label="地域分布"></subhead>
		<div class="regionDistribution" id="regionDistribution">
			
		</div>
	</div>
</template>
<script >
var geoCoordMap = {
    '北京':[116.39737,39.939502],
    '天津':[117.133262,39.256321],
    '上海':[106.32485,29.895013],
    '山西':[112.349964,38.044464],
    '辽宁':[123.241164,41.948112],
    '吉林':[125.228072,43.894927],
    '黑龙江':[126.479088,45.985284],
    '江苏':[118.715429,32.246466],
    '浙江':[120.040035,30.350837],
    '安徽':[117.170056,31.99595],
    '福建':[ 119.156964,26.182279],
    '江西':[115.808656,28.774611],
    '山东':[116.912494,36.812038],
    '河南':[113.453802,34.895028],
    '湖北':[114.116105,30.764814],
    '湖南':[112.800698,28.474291],
    '四川':[103.924003,30.796585],
    '贵州':[106.499624,26.844365],
    '云南':[102.72539,25.248948],
    '青海':[101.605943,36.752842],
    '西藏':[90.972306,29.838888],
    '广西':[108.265765,23.020403],
    '内蒙古':[111.614073,40.951504],
    '宁夏':[106.094884,38.624116],
    '汕尾':[115.375279,22.786211],
    '新疆':[87.476819,43.894927],
    '香港':[114.1529,22.542716],
    '澳门':[113.417008,22.337477],
    '台湾':[121.36464,25.248948]
};
import echarts from 'echarts'  
import subhead from 'components/common/subhead'	
import chinaJson from 'assets/china.json'

echarts.registerMap('china', chinaJson);

export default {
	name:'chart',
	components:{subhead},
	data(){
		return{
			name:[],
			xdata:[],
			ydata1:[],
			ydata2:[],
			ydata3:[],
			ydata4:[],
			ydata5:[],
			ydata6:[],
		}
	},
	mounted(){
		// 网站统计
		let el = document.getElementById('WebStatistics')
		let WebStatistics = echarts.init(el)
		this.WebStatistics(WebStatistics)
		// 媒体来源
		let el1 = document.getElementById('MediaSources')
		let MediaSources = echarts.init(el1)
		this.MediaSources(MediaSources)
		//媒体活跃度
		let el2 = document.getElementById('MediaActivity')
		let MediaActivity = echarts.init(el2)
		this.MediaActivity(MediaActivity)
		//地域分布图
		let el3 = document.getElementById('regionDistribution')
		let regionDistribution = echarts.init(el3)
		this.regionDistribution(regionDistribution)

	},
	methods:{
		async WebStatistics(name){
			let res = await this.$http.post('vrv-monitor-platform-web/topic/charts/websiteStatistics',{
				id:this.$store.state.Topic.topicId||localStorage.topicId
			})
			this.names = res.body.list
			this.xdata = res.body.xdata
			this.ydata1 = res.body.ydata1
			this.ydata2 = res.body.ydata2
			this.ydata3 = res.body.ydata3
			this.ydata4 = res.body.ydata4
			this.ydata5 = res.body.ydata5
			this.ydata6 = res.body.ydata6
			let option = {
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:this.names
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    toolbox: {
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: this.xdata
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [
			        {
			            name:this.names[0],
			            type:'line',
			            stack: '总量',
			            data:this.ydata1
			        },
			        {
			            name:this.names[1],
			            type:'line',
			            stack: '总量',
			            data:this.ydata2
			        },
			        {
			            name:this.names[2],
			            type:'line',
			            stack: '总量',
			            data:this.ydata3
			        },
			        {
			            name:this.names[3],
			            type:'line',
			            stack: '总量',
			            data:this.ydata4
			        },
			        {
			            name:this.names[4],
			            type:'line',
			            stack: '总量',
			            data:this.ydata5
			        },
			        {
			            name:this.names[5],
			            type:'line',
			            stack: '总量',
			            data:this.ydata6
			        },
			    ]
			};
			name.setOption(option)
		},
		//媒体来源
		async MediaSources(name){
			let res = await this.$http.post('vrv-monitor-platform-web/topic/charts/mediaSources',{
				id:this.$store.state.Topic.topicId||localStorage.topicId
			})
			let mediaSourcesName = Array.from(res.body.data,s=>s.name)
			let option = {
			    title : {
			        text: '媒体来源占比',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: mediaSourcesName
			    },
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:res.body.data,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			name.setOption(option)

		},
		//媒体活跃度
		async MediaActivity(name){
			let res = await this.$http.post('vrv-monitor-platform-web/topic/charts/mediaActivity',{
				id:this.$store.state.Topic.topicId||localStorage.topicId
			})
			let MediaName = Array.from(res.body.data,s=>s.name)
			let MediaValue = Array.from(res.body.data,s=>s.value)
			let option1 = {
					title: {
				        text: '媒体活跃度'
				    },
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            data : MediaName,
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'直接访问',
				            type:'bar',
				            barWidth: '60%',
				            data:MediaValue
				        }
				    ]
				};
				name.setOption(option1)
		},
		//地域分布图
		async regionDistribution(name){
			let res = await this.$http.post('vrv-monitor-platform-web/topic/charts/regionDistribution',{
				id:this.$store.state.Topic.topicId||localStorage.topicId
			})
			let data = res.body.data
			var convertData = function (data) {
			    let res = [];
			    for (let i = 0; i < data.length; i++) {
			        let geoCoord = geoCoordMap[data[i].name];
			        if (geoCoord) {
			            res.push({
			                name: data[i].name,
			                value: geoCoord.concat(data[i].value)
			            });
			        }
			    }
		    	return res;
			};
			let option = {
			    backgroundColor: '#404a59',
			    title: {
			        left: 'center',
			        textStyle: {
			            color: '#fff'
			        }
			    },
			    tooltip : {
			        trigger: 'item'
			    },
			    legend: {
			        orient: 'vertical',
			        y: 'bottom',
			        x:'right',
			        data:['地域分布'],
			        textStyle: {
			            color: '#fff'
			        }
			    },
			    geo: {
			        map: 'china',
			        label: {
			            emphasis: {
			                show: false
			            }
			        },
			        roam: false,
			        itemStyle: {
			            normal: {
			                areaColor: '#323c48',
			                borderColor: '#111'
			            },
			            emphasis: {
			                areaColor: '#2a333d'
			            }
			        }
			    },
			    series : [
			        {
			            name: '地域分布',
			            type: 'scatter',
			            coordinateSystem: 'geo',
			            data: convertData(data),
			            symbolSize: function (val) {
			                return val[2] / 100;
			            },
			            label: {
			                normal: {
			                    formatter: '{b}',
			                    position: 'right',
			                    show: false
			                },
			                emphasis: {
			                    show: true
			                }
			            },
			            itemStyle: {
			                normal: {
			                    color: '#ddb926'
			                }
			            }
			        },
			        {
			            name: '分布',
			            type: 'effectScatter',
			            coordinateSystem: 'geo',
			            data: convertData(data.sort(function (a, b) {
			                return b.value - a.value;
			            }).slice(0, 6)),
			            symbolSize: function (val) {
			                return val[2] / 300;
			            },
			            showEffectOn: 'render',
			            rippleEffect: {
			                brushType: 'stroke'
			            },
			            hoverAnimation: true,
			            label: {
			                normal: {
			                    formatter: '{b}',
			                    position: 'right',
			                    show: true
			                }
			            },
			            itemStyle: {
			                normal: {
			                    color: '#f4e925',
			                    shadowBlur: 10,
			                    shadowColor: '#333'
			                }
			            },
			            zlevel: 1
			        }
			    ]
			};
			name.setOption(option)

		}
	}
}
</script>
<style scoped>
	.chart{
		padding: 0 1.8rem;
	}
	.WebStatistics{
		height: 25rem;
	}
	.DataAnalysis{
		display: flex;
		margin:1.875rem 3.75rem;
	}
	.DataAnalysis .left,.DataAnalysis .right{
		flex:1;
		height: 25rem;
	}
	.regionDistribution{
		margin: 1.875rem 3.75rem;
		height: 25rem;
	}
</style>